<template>
    <div>
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         @checkboxChange="checkboxChange"
         ref="questionnaireManagementRef"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         >
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="editClick({})">新增</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="red-btn" type="primary" @click="deleteClick(row)">删除</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="editClick(row)">编辑</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @increaseRefresh="increaseRefresh" />
    </div>
</template>
<script>
import {deleteArrServe,addServe,editServe} from './service/index'
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import increase from './increase.vue'
export default {
    components:{
    commpVxeTable,
    increase
},
    props:{

    },
    data(){
        return{
            formItem:[
                {
                    label: '人员类型',
                    model: 'frylx',
                }
            ],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{}
            },
            columnsVxe:[
                { 
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '序号', //列头显示文字
                    field: 'forder',
                },{
                    title: '人员类型', //列头显示文字
                    field: 'frylx',
                },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    fixed: 'right',
                    width:280,
            }],
            selectedRowKeysArr:[],
        }
    },
    watch:{

    },
    mounted(){
        
        
    },
    methods:{
        searchEvent(){//搜索
        },
        resetEvent(){//重置

        },
        checkboxChange(val){//获取当前选择的行
            //console.log('当前选择表格',val)
            this.selectedRowKeysArr = []
            val.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteArrServe({ids:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.$refs.questionnaireManagementRef.searchEvent()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        editClick(row){
            this.$refs.increaseRef.visibleShow = true
            this.$refs.increaseRef.getData(row)
        },
        increaseRefresh(){
            this.$refs.questionnaireManagementRef.searchEvent()
        }
    }
}
</script>
<style>
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
</style>